<template>
  <div class="container">
    <el-card class="directory-container">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item label="目录名称" label-width="80px">
          <el-input v-model="queryparams.directoryName"></el-input>
        </el-form-item>
        <el-form-item label="状态" label-width="80px">
          <el-select v-model="queryparams.state" placeholder="请选择状态">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="onclear">清除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsearch">搜索</el-button>
        </el-form-item>
        <el-form-item class="rightbtn">
          <el-button type="success" icon="el-icon-edit" @click="addDialog()"
            >新增目录</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 添加和修改组件 -->
      <!-- <directorys
        :result="currDirectory"
        @getDriectorys="getDriectorys"
        v-model="dialogFormVisible"
        ref="directorysAdd"
      >
      </directorys> -->
      <!-- 数据条数统计 -->
      <el-alert type="info" show-icon :closable="false">
        <span slot="title">数据一共{{ tablist.counts }}条</span>
      </el-alert>
      <el-table :data="tablist.items" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="180">
        </el-table-column>
        <el-table-column prop="directoryName" label="目录名称" width="180">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <span slot-scope="scope">
            {{ scope.row.addDate | timefilter }}
          </span>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <span slot-scope="scope">{{
            scope.row.state === 0 ? '已禁用' : '已启用'
          }}</span>
          <span>启用</span>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="isdisable(scope.row)"
              >{{ scope.row.state === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="amendDirectory(scope.row)"
              >修改</el-button
            >
            <el-button
              @click="deletedirectory(scope.row)"
              type="text"
              :disabled="scope.row.state === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryparams.page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="queryparams.pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="tablist.counts"
      >
      </el-pagination>
      <!-- 新增目录对话框 -->
      <el-dialog
        title="新增目录"
        :visible.sync="addDirectoryVisible"
        width="400px"
        @close="closedialog(addform)"
      >
        <el-form
          ref="addform"
          :rules="directoryrules"
          :model="addform"
          label-width="80px"
          size="small"
        >
          <el-form-item label="所属学科">
            <el-select v-model="addform.subjectName" class="subjectwidth">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-model="addform.directoryName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDirectoryVisible = false">取 消</el-button>
          <el-button type="primary" @click="addDirectory(addform)">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 目录修改对话框 -->
      <el-dialog
        title="修改目录"
        :visible.sync="amendDialogVisible"
        width="400px"
      >
        <el-form
          ref="form"
          :rules="directoryrules"
          :model="form"
          label-width="80px"
          size="small"
        >
          <el-form-item label="所属学科">
            <el-select v-model="form.subjectName" class="subjectwidth">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-model="form.directoryName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="amendDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="revamp()">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 获取目录列表、目录状态、目录修改
import { list, changeState, add, update, remove } from '@/api/hmmm/directorys.js'
import { list as subject } from '@/api/hmmm/subjects.js'
// 导入时间过滤器
import { parseTime } from '@/utils'

export default {

  data () {

    return {
      currDirectory: {},
      formInline: {
        user: '',
        region: ''
      },
      // 初始化页面数据
      queryparams: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        directoryName: null,
        state: null
      },
      // 渲染的页面数据
      tablist: {},
      // 目录修改对话框默认隐藏
      amendDialogVisible: false,
      // 新增目录对话框默认隐藏
      addDirectoryVisible: false,
      // 定义新增目录数据
      addform: {
        subjectName: null,
        directoryName: ''
      },
      // 定义修改对话框的数据
      form: {},
      // 定义修改数据的id
      id: null,
      subjectList: [],
      // 目录验证
      directoryrules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },


    }
  },
  // 定义时间过滤器
  filters: {
    timefilter: function (time) {
      return parseTime(time)
    }
  },
  created () {
    this.getdirectoryList()
  },
  methods: {
    async getdirectoryList () {
      try {
        const res = await list(this.queryparams)
        this.tablist = res.data
        console.log(this.tablist)
      } catch (err) {
        this.$message.error('获取数据失败')
      }
    },

    // 页码
    // 当前页
    handleSizeChange (val) {
      this.queryparams.pagesize = val
      this.getdirectoryList()
    },
    handleCurrentChange (val) {
      this.queryparams.page = val
      this.getdirectoryList()
    },
    //搜索功能
    onsearch () {
      this.getdirectoryList()
    },
    //清除功能
    onclear () {
      this.queryparams.directoryName = null,
        this.queryparams.state = null
    },
    // 禁用功能
    async isdisable (data) {
      try {
        await changeState({ id: data.id, state: data.state === 1 ? 0 : 1 })
        this.$message.success('操作成功')
        this.getdirectoryList()
      } catch (err) {
        this.$message.err('操作失败')
      }
    },
    // 新增目录事件
    async addDirectory (addform) {
      try { 
        await add({subjectName:addform.subjectName,directoryName:addform.directoryName})
        this.$message.success('添加目录成功')
      } catch (err) {
        this.$message.error('添加目录失败')
      }
    },
    // 修改提交事件
    async revamp () {
      try {
        await update({ id: this.id, subjectID: form.subjectID, directoryName: form.directoryName })
        this.$message.success('更新目录成功')

      } catch (err) {
        this.$message.error('提交失败')
      }
    },
    // 修改目录事件
    // 获取科目分类
    async amendDirectory (row) {
      this.form = row
      // this.id=row.id
      this.amendDialogVisible = true
      try {
        const res = await subject()
        this.subjectList = res.data.items
        console.log(res, '123')
      } catch (err) {
        this.$message.error('获取列表失败')
      }
    },
    // 添加目录事件
    // 获取科目分类
    async addDialog () {
      this.addDirectoryVisible = true
      try {
        const res = await subject()
        this.subjectList = res.data.items
        console.log(res, '123')
      } catch (err) {
        this.$message.error('获取列表失败')
      }
    },
    // 对话框关闭回调函数
    closedialog (addform) {
      console.log('关闭对话框')
      addform.subjectName = null,
      addform.directoryName = ''
    },


    // async amendDirectory (row = {}) {
    //   this.dialogFormVisible = true
    //   this.currDirectory = row
    //   this.$nextTick(() => {
    //     this.$refs.directorysAdd.open()
    //   })
    // },
    // 点击删除
    // 点击删除
    async deletedirectory (row) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(row)
      this.$message.success('删除成功')
      this.getdirectoryList()
    },

  }
}
</script>

<style scoped lang='less'>
.directory-container {
  margin: 10px;
  .rightbtn {
    float: right;
  }
  .el-table {
    margin-top: 15px;
  }
  .el-pagination {
    float: right;
    margin: 20px 0;
  }
  .subjectwidth {
    width: 280px;
  }
  /deep/.el-dialog__footer {
    text-align: right;
  }
}
</style>
